import { useEffect, useState } from "react";
import "./StoFilter.scss";

interface Inputer {
  type: string;
  placeholder: string;
  key: string;
  options?: any[];
}

type StoFilterProps = {
  filters: Inputer[];
  onReset: () => void;
  onSearch: (values: Record<string, any>) => void;
};

const StoFilter: React.FC<StoFilterProps> = ({
  filters,
  onReset,
  onSearch,
}) => {
  /* 
  {
    name:'金',//null
    age:[18,80],//null
    gender:'二椅子'//[0,0]
  }
  */
  const [values, setValues] = useState<Record<string, any>>({});

  /* 组件挂载时根据用户配置的filters初始化一下 values  */
  useEffect(() => {
    console.log("ComponentDidMount");
    const obj: Record<string, any> = {};
    filters.forEach(
      ({ key, type }) => (obj[key] = type === "number" ? [0, 0] : null)
    );
    setValues(obj);
  }, []);

  const renderInputer = ({ type, placeholder, options, key }: Inputer) => {
    switch (type) {
      case "text":
        return (
          <input
            onChange={(e) => {
              values[key] = e.target.value;
              // setValues({ ...values });
              setValues(Object.assign({}, values));
            }}
            className="item"
            type={type}
            placeholder={placeholder}
          />
        );

      case "select":
        return (
          <select
            onChange={(e) => {
              console.log(key, e.target.value);

              values[key] = e.target.value;
              setValues(Object.assign({}, values));
            }}
            className="item"
            name="sel-x"
            id=""
          >
            <option value="">{placeholder}</option>
            {options!.map((op) => (
              <option value={op}>{op}</option>
            ))}
          </select>
        );

      case "number":
        return (
          <div className="item range-box">
            <input
              onChange={(e) => {
                values[key][0] = Number(e.target.value);
                setValues(Object.assign({}, values));
              }}
              type="number"
              placeholder={"最小" + placeholder}
            />
            <span>-</span>
            <input
              onChange={(e) => {
                values[key][1] = Number(e.target.value);
                setValues(Object.assign({}, values));
              }}
              type="number"
              placeholder={"最大" + placeholder}
            />
          </div>
        );

      default:
        break;
    }
  };

  return (
    <>
      <div className="wrapper-sto-filter">
        {/* 字符串-模糊搜索 */}
        {/* <input className="item" type="text" placeholder="请输入用户姓名" /> */}

        {/* 枚举-下拉过滤 */}
        {/* <select className="item" name="sel-x" id="">
          <option value="">请选择性别</option>
          <option value="">A</option>
          <option value="">B</option>
          <option value="">C</option>
        </select> */}

        {/* 数值-范围过滤 */}
        {/* <div className="item range-box">
          <input type="number" placeholder="最小年龄" />
          <span>-</span>
          <input type="number" placeholder="最大年龄" />
        </div> */}

        {filters.map((inputer) => renderInputer(inputer))}

        {/* 空白 */}
        <div className="item"></div>

        {/* 搜索 + 重置 */}
        <div className="item btns">
          <button
            onClick={() => {
              onSearch(values);
            }}
          >
            搜索
          </button>
          <button onClick={onReset}>重置</button>
        </div>

        {/*  */}
      </div>
    </>
  );
};

export default StoFilter;
